<template>
  <div class="measure-measure">
    <!-- 头部 -->
    <ContentTitle :info="ctInfo">
      <el-button
        type="primary"
        size="small"
        style="height: 40px"
        @click="handleAdd"
      >
        新增测量
      </el-button>
    </ContentTitle>

    <!-- 列表 -->
    <List :list="list" @edit="handleEdit" @del="handleDelete"/>

    <!-- 新增对话框 -->
    <Form :form="form"  :editing="editing" :loading="loading" @submit="onSubmit" ref="form"/>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle";
import List from './components/List.vue';
import Form from './components/Form.vue';
// 导入封装后的请求方法
import {
  $measurementList,
  $measurementAdd,
  $measurementEdit,
  $measurementDel,
} from "@/api/index";
export default {
  components: {
    ContentTitle,
    List,
    Form
  },

  data() {
    return {
      currIndex: -1,  // 被编辑的对象的下标
      editing: false, // 是否是在编辑 
      loading: false, // 新增时的loading
      form: {
        name: "",
        unit: "", // 单位
      }, // 新增表单
      ctInfo: {
        type: "测量",
        text: "测量类型的增删改查",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },

      list: [
        // {
        //   id: "460000199111200643",
        //   cTime: 1647179599494,
        //   uTime: 1647179599494,
        //   name: "光照",
        //   unit: "lx",
        // },
      ],
    };
  },

  created() {
    this.getList();
  },

  methods: { 

    // 立即提交
    onSubmit() {
      // 关闭对话框
      this.$refs.form.show = false;

      if (this.editing) {
        // 编辑
         $measurementEdit(this.form).then(res=> { 
           this.show = false;
           // this.list[this.currIndex] = res.data; // 数据不生效
          // 数组方法: pop, push, splice...可以触发改变
          this.list.splice(this.currIndex,1,res.data);  
         })
      } else {
        // 新增
        let params = {
          name: this.form.name,
          unit: this.form.unit,
        };
        // 发请求之前, 启动loading
        this.loading = true;
        $measurementAdd(params)
          .then((res) => {
            // 隐藏对话框
            this.show = false;
            // 把数据添加到列表的前面
            this.list.unshift(res.data);
            // this.list.push(res.data); // 插到后面
            // 关闭loading
            this.loading = false;
          })
          .catch((err) => {
            // todo
            this.loading = false;
          });
      }
    },

    // 显示对话框
    handleAdd() {
      this.editing = false; 
      // 修改子组件的show的值
      this.$refs.form.show = true;
      this.form = {};
    },
    // 显示对话框
    handleEdit(index, row) {
      this.currIndex = index;
      this.editing = true;
      this.$refs.form.show = true;
      // 使用深拷贝, 让this.form和row是两个不同的对象
      this.form = { ...row };
    },
    handleDelete(index, row) { 
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let params = {
          id: row.id,
        };
        row.loading = true;
        $measurementDel(params)
          .then((res) => {
            row.loading = false;
            // 移除数组里对应的对象
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })

          .catch((err) => {
            row.loading = false;
            // todo
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          });
      });
    },
    // 获取列表
    getList() {
      $measurementList().then((res) => {
        this.list = res.data.map((item) => {
          return {
            ...item,
            loading: false,
          };
        });
      });
    },
  },
};
</script>